<template>
  <view>
    <view class="content relative">
      <view class="list relative">
        <view class="item u-f-ac u-f-jsb" v-for="(item, index) in list" :key="index">
          <view class="left_box">
            <view class="f-w-700">任务{{index+1}}：</view>
            <view>{{item.remark}}</view>
          </view>
          <view class="wancheng u-f" v-if="item.seen == 1">
            任务已完成
          </view>
          <image src="/static/images/caidan/lijiguankan.png" mode="widthFix" v-else @click="getCrazyCheck(item, index)">
          </image>
        </view>
      </view>
    </view>

    <u-mask :show="showVideo">
      <view class="u-f-ajc video_box relative">
        <view class="absolute abso_icon"><u-icon name="close-circle" size="60" color="#fff" @click="closeMask"></u-icon>
        </view>
        <!-- <view class="bg_box absolute" :class="!items.is_h ? 'shuping' : 'hengping'"></view> -->
        <video v-if="showVideo" id="myVideo" class="video relative" :class="!items.is_h ? 'shuping' : 'hengping'"
          objectFit="contain" :src="url" autoplay object-fit="fill" page-gesture :controls="false"
          :enable-progress-gesture="false" @ended="putCrazyDone">
          <!-- <cover-view class="bg_box absolute"></cover-view> -->
        </video>
      </view>
    </u-mask>



    <caidanTbbar :tabbar="1"></caidanTbbar>

  </view>
</template>

<script>
  import caidanTbbar from './caidan_tabbar.vue'
  import * as API_Mall from '@/api/malls.js';
  export default {
    components: {
      caidanTbbar
    },
    data() {
      return {
        list: [],
        url: '',
        items: {},
        showVideo: false,

        wancheng: false,
        video_real_time: 0,
        initial_time: '',

      }
    },
    async onLoad() {
      await this.getCrazyActivities()
    },
    onNavigationBarButtonTap(e) {
      this.closeMask()
    },
    methods: {
      async getCrazyActivities() {
        let res = await API_Mall.getCrazyActivities()
        this.list = res
      },

      // jiancha() {
      //   if (this.list.length) {
      //     API_Mall.getCrazyCheck(this.list[0].id).then((res) => {}).catch(err => {
      //       this.wancheng = true
      //     })
      //   }
      // },

      getCrazyCheck(item, index) {
        API_Mall.getCrazyCheck(item.id).then((res) => {
          this.url = item.url
          this.items = item
          this.showVideo = true
        }).catch(err => {
          // this.wancheng = true
        })
      },
      async putCrazyDone() {
        this.showVideo = false
        let res = await API_Mall.putCrazyDone(this.items.id)
        this.$u.toast('完成任务！')
        this.getCrazyActivities()
        // this.jiancha()
      },
      closeMask() {
        this.showVideo = false
        this.getCrazyActivities()
        // this.jiancha()
        // uni.redirectTo({
        //   url: '/mine-module/caidan/index'
        // })
      },
      // 禁止拖动进度条快进
      timeUpdate: function(e) {
        console.log(e)
        var isReady = 1; // 是否开启可以视频快进 1 禁止开启
        //跳转到指定播放位置 initial-time 时间为秒
        let that = this;
        //播放的总时长
        var duration = e.detail.duration;
        //实时播放进度 秒数
        var currentTime = parseInt(e.detail.currentTime);
        //当前视频进度
        console.log("视频播放到第" + currentTime + "秒") //查看正在播放时间，以秒为单位
        if (that.video_real_time == 0) {
          var jump_time = parseInt(that.initial_time) + parseInt(that.video_real_time);
        } else {
          var jump_time = parseInt(that.video_real_time);
        }
        if (isReady == 1) {
          if (currentTime > jump_time && currentTime - jump_time > 3) {
            let videoContext = uni.createVideoContext('myVideo');
            videoContext.seek(that.video_real_time);
            uni.showToast({
              title: '未完整看完该视频，不能快进',
              icon: 'none',
              duration: 2000
            });
          }
        }
        that.video_real_time = currentTime; //实时播放进度

        // if (that.video_real_time == e.detail.duration) {
        //   // that.putCrazyDone()
        // }
      }

    },
  }
</script>

<style lang="scss">
  page {
    background-color: #E91536;
  }

  .content {
    padding: 70rpx 30rpx 200rpx;
  }

  .list {
    width: 100%;

    .item {
      width: 100%;
      background: #FFFCF0;
      border: 1px solid #FF6264;
      box-shadow: 0px 0px 10rpx 2rpx #FFE478;
      border-radius: 30rpx;
      color: #8A3D06;
      padding: 20rpx 30rpx;
      margin-bottom: 30rpx;

      image {
        width: 190rpx;
        margin-top: 20rpx;
      }

      .left_box {
        width: 65%;

        >view:nth-of-type(1) {
          font-size: 32rpx;
          margin-bottom: 14rpx;
        }

        >view:nth-of-type(2) {
          font-size: 20rpx;
        }
      }
    }

  }

  .video_box {
    width: 100%;
    height: 100%;
    background-color: #000;

    // .bg_box {
    //   left: 0;
    //   top: 0;
    //   z-index: 99;
    //   // background-color: rgba(0, 0, 0, 0);
    //   background-color: red;
    //   width: 100% !important;
    //   height: 100% !important;
    // }

    .abso_icon {
      z-index: 99;
      right: 30rpx;
      top: 30rpx;
    }

    .video {
      // width: 100%;
      // margin-top: 20%;

    }

    .hengping {
      width: 80% !important;
    }

    .shuping {
      width: 100% !important;
      height: 70% !important;
    }
  }

  .wancheng {
    width: 190rpx;
    height: 100rpx;
    background: url(/static/images/caidan/yiwancheng.png) no-repeat 0 0;
    background-size: 100% 100rpx;
    margin-top: 20rpx;
    color: #fff;
    justify-content: center;
    padding-top: 20rpx;
  }
</style>